'use client'

import React, { useState } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Checkbox } from '@/components/ui/checkbox'
import { Switch } from '@/components/ui/switch'
import { Progress } from '@/components/ui/progress'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Separator } from '@/components/ui/separator'
import { Skeleton } from '@/components/ui/skeleton'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { 
  Palette,
  Component,
  Heart,
  Star,
  Calendar as CalendarIcon,
  User,
  Settings,
  BookOpen,
  Award,
  AlertTriangle,
  CheckCircle,
  Info,
  Plus,
  Eye,
  EyeOff
} from 'lucide-react'

const ComponentShowcase = () => {
  const [switchValue, setSwitchValue] = useState(false)
  const [showPassword, setShowPassword] = useState(false)

  return (
    <div className="min-h-screen bg-gradient-soft p-6">
      <div className="mx-auto max-w-7xl space-y-8">
        
        {/* 页面标题 */}
        <div className="text-center space-y-4">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Component className="h-8 w-8 text-primary" />
            <h1 className="text-h1 font-bold">UI组件库展示</h1>
          </div>
          <p className="text-body-lg text-muted-foreground max-w-3xl mx-auto">
            浙江财经大学个性化学习路径规划系统的完整UI组件库，包含按钮、表单、卡片、数据展示等各类组件的使用示例
          </p>
        </div>

        <Tabs defaultValue="buttons" className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="buttons">按钮组件</TabsTrigger>
            <TabsTrigger value="forms">表单组件</TabsTrigger>
            <TabsTrigger value="cards">卡片组件</TabsTrigger>
            <TabsTrigger value="feedback">反馈组件</TabsTrigger>
          </TabsList>

          {/* 按钮组件 */}
          <TabsContent value="buttons" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Component className="h-5 w-5" />
                  按钮组件 (Button)
                </CardTitle>
                <CardDescription>
                  不同变体和尺寸的按钮组件，支持图标和加载状态
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* 按钮变体 */}
                <div className="space-y-4">
                  <h4 className="text-h4 font-medium">按钮变体</h4>
                  <div className="flex flex-wrap gap-3">
                    <Button>默认按钮</Button>
                    <Button variant="secondary">次要按钮</Button>
                    <Button variant="outline">边框按钮</Button>
                    <Button variant="ghost">幽灵按钮</Button>
                    <Button variant="destructive">危险按钮</Button>
                    <Button variant="link">链接按钮</Button>
                  </div>
                </div>

                {/* 按钮尺寸 */}
                <div className="space-y-4">
                  <h4 className="text-h4 font-medium">按钮尺寸</h4>
                  <div className="flex flex-wrap items-center gap-3">
                    <Button size="sm">小按钮</Button>
                    <Button size="default">默认按钮</Button>
                    <Button size="lg">大按钮</Button>
                    <Button size="icon"><Plus className="h-4 w-4" /></Button>
                  </div>
                </div>

                {/* 带图标的按钮 */}
                <div className="space-y-4">
                  <h4 className="text-h4 font-medium">图标按钮</h4>
                  <div className="flex flex-wrap gap-3">
                    <Button><User className="h-4 w-4 mr-2" />用户中心</Button>
                    <Button variant="outline"><Settings className="h-4 w-4 mr-2" />设置</Button>
                    <Button variant="secondary"><BookOpen className="h-4 w-4 mr-2" />课程</Button>
                    <Button variant="outline" size="sm">
                      <Star className="h-4 w-4 mr-1" />收藏
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* 徽章组件 */}
            <Card>
              <CardHeader>
                <CardTitle>徽章组件 (Badge)</CardTitle>
                <CardDescription>用于标记状态、分类和学科的徽章组件</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* 基础徽章 */}
                <div className="space-y-4">
                  <h4 className="text-h4 font-medium">基础徽章</h4>
                  <div className="flex flex-wrap gap-3">
                    <Badge>默认</Badge>
                    <Badge variant="secondary">次要</Badge>
                    <Badge variant="outline">边框</Badge>
                    <Badge variant="destructive">危险</Badge>
                  </div>
                </div>

                {/* 学科主题徽章 */}
                <div className="space-y-4">
                  <h4 className="text-h4 font-medium">学科主题徽章</h4>
                  <div className="flex flex-wrap gap-3">
                  </div>
                </div>

                {/* 徽章尺寸 */}
                <div className="space-y-4">
                  <h4 className="text-h4 font-medium">徽章尺寸</h4>
                  <div className="flex flex-wrap items-center gap-3">
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 表单组件 */}
          <TabsContent value="forms" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>表单组件</CardTitle>
                <CardDescription>包含输入框、选择器、开关等各类表单控件</CardDescription>
              </CardHeader>
              <CardContent className="space-y-8">
                {/* 输入框 */}
                <div className="space-y-4">
                  <h4 className="text-h4 font-medium">输入框组件</h4>
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="name">姓名</Label>
                      <Input id="name" placeholder="请输入你的姓名" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">邮箱</Label>
                      <Input id="email" type="email" placeholder="your@email.com" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="password">密码</Label>
                      <div className="relative">
                        <Input 
                          id="password" 
                          type={showPassword ? "text" : "password"} 
                          placeholder="请输入密码" 
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                          onClick={() => setShowPassword(!showPassword)}
                        >
                          {showPassword ? (
                            <EyeOff className="h-4 w-4" />
                          ) : (
                            <Eye className="h-4 w-4" />
                          )}
                        </Button>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="phone">手机号</Label>
                      <Input id="phone" placeholder="138-0000-0000" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="description">个人描述</Label>
                    <Textarea 
                      id="description" 
                      placeholder="请描述你的学习兴趣和职业目标..." 
                      className="min-h-24"
                    />
                  </div>
                </div>

                {/* 选择控件 */}
                <div className="space-y-4">
                  <h4 className="text-h4 font-medium">选择控件</h4>
                  <div className="grid gap-6 md:grid-cols-2">
                    <div className="space-y-3">
                      <Label className="text-base font-medium">学习偏好（多选）</Label>
                      <div className="space-y-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox id="theory" />
                          <Label htmlFor="theory">理论学习</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="practice" />
                          <Label htmlFor="practice">实践操作</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="group" />
                          <Label htmlFor="group">小组讨论</Label>
                        </div>
                      </div>
                    </div>
                    
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <Label htmlFor="notifications">推送通知</Label>
                        <Switch 
                          id="notifications" 
                          checked={switchValue}
                          onCheckedChange={setSwitchValue}
                        />
                      </div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor="ai-recommend">AI推荐</Label>
                        <Switch id="ai-recommend" defaultChecked />
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 卡片组件 */}
          <TabsContent value="cards" className="space-y-6">
            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
 









            </div>
          </TabsContent>

          {/* 反馈组件 */}
          <TabsContent value="feedback" className="space-y-6">
            {/* 警告框 */}
            <Card>
              <CardHeader>
                <CardTitle>警告框组件 (Alert)</CardTitle>
                <CardDescription>用于显示重要信息和状态提示</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <Alert>
                  <Info className="h-4 w-4" />
                  <AlertTitle>信息提示</AlertTitle>
                  <AlertDescription>
                    这是一个普通的信息提示框，用于展示一般性信息。
                  </AlertDescription>
                </Alert>

                <Alert variant="destructive">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertTitle>错误提示</AlertTitle>
                  <AlertDescription>
                    检测到系统错误，请稍后重试或联系管理员。
                  </AlertDescription>
                </Alert>

                <Alert className="border-success/50 text-success dark:border-success [&>svg]:text-success">
                  <CheckCircle className="h-4 w-4" />
                  <AlertTitle>成功提示</AlertTitle>
                  <AlertDescription>
                    操作已成功完成！你的学习进度已更新。
                  </AlertDescription>
                </Alert>
              </CardContent>
            </Card>

            {/* 进度条 */}
            <Card>
              <CardHeader>
                <CardTitle>进度条组件 (Progress)</CardTitle>
                <CardDescription>用于显示完成进度和加载状态</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <div className="flex justify-between text-body-sm">
                    <span>学习进度</span>
                    <span>75%</span>
                  </div>
                  <Progress value={75} className="h-2" />
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between text-body-sm">
                    <span>课程完成</span>
                    <span>45%</span>
                  </div>
                  <Progress value={45} className="h-3" />
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between text-body-sm">
                    <span>目标达成</span>
                    <span>90%</span>
                  </div>
                  <Progress value={90} className="h-4" />
                </div>
              </CardContent>
            </Card>

            {/* 骨架屏 */}
            <Card>
              <CardHeader>
                <CardTitle>骨架屏组件 (Skeleton)</CardTitle>
                <CardDescription>用于内容加载时的占位显示</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-4">
                  <Skeleton className="h-12 w-12 rounded-full" />
                  <div className="space-y-2">
                    <Skeleton className="h-4 w-[250px]" />
                    <Skeleton className="h-4 w-[200px]" />
                  </div>
                </div>
                <Separator />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-4 w-3/4" />
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

      </div>
    </div>
  )
}

export default ComponentShowcase 